import React, {Component} from 'react';
import {Relax} from 'iflux2';
import {List, Map, is} from 'immutable';

import {Button, Row, Col, Popconfirm} from 'antd';
import SearchSelect from 'components/search-select';
import Pages from './page';
import User from './user';
import Empty from './empty';

import noop from 'util/noop';
import {routerShape} from 'constant/PropTypes';


@Relax
export default class ChooseUser extends Component {
    static defaultProps = {
        users: List(),
        chooseUser: Map(),
        search: Map(),
        queryUsers: noop,
        resetPagination: noop,
        setSearchValue: noop,
        resetChooseUserOpt: noop,
        setPagination: noop,
        setStep: noop
    }

    //路由跳转
    static contextTypes = {
        router: routerShape
    }

    render() {
        const {users, chooseUser, search} = this.props;

        let content = [];
        if (users.isEmpty()) {
            content.push(<Empty/>);
        } else {
            content.push([
                <div className="customer-list">
                    <Row gutter={12}>
                        {
                            users.map((v, index)=>{
                                return (
                                    <Col span="6" key={index}><User user={v} checked={is(v, chooseUser)}/></Col>
                                )
                            })
                        }
                    </Row>
                </div>,
                <Pages pagination={search.get('pagination')}
                       changePageNum={(pageNum)=>this.changePageNum(pageNum)}
                       changePageSize={(current, pageSize)=>this.changePageSize(current, pageSize)}/>
            ])
        }

        return (
            <div>
                {this.renderTopBar()}
                {content}
                <div className="fixedSubmit">
                    <div className="t-center">
                        <Popconfirm placement="topRight"
                                    title={"您确定要放弃代客下单吗？"}
                                    onConfirm={this.cancel}>
                            <Button type="ghost">取消</Button>
                        </Popconfirm>
                        <Button type="primary pushl" disabled={chooseUser.isEmpty()} onClick={()=>this.props.setStep('goods')}>下一步选商品</Button>
                    </div>
                </div>
            </div>
        )
    }


    cancel = ()=>{
        this.context.router.goBack();
    }

    /**
     * 渲染
     * @returns {XML}
     */
    renderTopBar() {
        return (
            <div className="top-bar">
                <Row>
                    <Col span={12}>
                        <div className="inline-blk">
                            <b className="font-16 lh36"><span className="step-num">1</span>选择客户：</b>
                        </div>
                    </Col>
                    <Col span={12}>
                        <Col span={12}/>
                        <Col span={12}>
                            <SearchSelect placeholder="请输入会员登录名／会员编号"
                                          size="large"
                                          onSearch={(value)=>this.onSearch(value)}/>
                        </Col>
                    </Col>
                </Row>
            </div>
        )
    }


    /**
     * 搜索会员
     * @param searchValue
     */
    onSearch(searchValue) {
        const {setSearchValue, resetPagination, resetChooseUserOpt, queryUsers} = this.props;
        setSearchValue(searchValue);
        resetPagination();
        resetChooseUserOpt();
        queryUsers({searchValue})
    }


    /**
     * 点击页码
     * @param pageNum
     */
    changePageNum(pageNum) {
        this.props.setPagination({pageNum});
        this.queryUsers();
    }


    /**
     * 修改pageSize
     * @param pageNum
     * @param pageSize
     */
    changePageSize(pageNum, pageSize) {
        this.props.setPagination({pageNum: 0, pageSize});
        this.queryUsers();
    }


    /**
     * 查询用户列表
     */
    queryUsers() {
        this.props.queryUsers();
    }
}